<template>
  <div class="private">
    <el-steps :active="active" finish-status="success">
      <el-step title="准备"></el-step>
      <el-step title="配置"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <div class="content-box">
      <div v-if="active===0">
        <h3>一、新建仓库</h3>
        <h4 style="margin-top: 1rem">1.1 点击+号,新建仓库</h4>
        <img class="content-box_img" src="../assets/step1.png" />
        <h4>1.2 填写仓库信息</h4>
        <img class="content-box_img" src="../assets/step2.png" />
        <h3>二、获取私人令牌</h3>
        <h4 style="margin-top: 1rem">2.1 点击头像，进入设置</h4>
        <img class="content-box_img" src="../assets/step3.png" />
        <h4>2.2 找到右边安全设置里面的私人令牌</h4>
        <img class="content-box_img" style="width: 42rem;" src="../assets/step4.png" />
        <h4>2.3 点击生成新令牌，把projects这一项勾上，其他的不用勾，然后提交</h4>
        <img class="content-box_img" src="../assets/step5.png" />
        <h4>2.4 获取密钥</h4>
        <img class="content-box_img" src="../assets/step6.png" />
        <div class="tip">注:这个令牌只会明文显示一次，建议在配置插件的时候再来生成令牌，直接复制进去，搞丢了又要重新生成一个。</div>
      </div>
      <div v-if="active===1" >
         <img class="illustration" src="../assets/product.svg">
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
          <el-form-item label="Gitee用户名:" prop="owner">
            <el-input v-model="form.owner" placeholder="请输入您的Gitee用户名"></el-input>
          </el-form-item>
          <el-form-item label="仓库名:" prop="repo">
            <el-input v-model="form.repo" placeholder="请输入仓库名"></el-input>
          </el-form-item>
          <el-form-item label="私人令牌:" prop="token">
            <el-input v-model="form.token" placeholder="请输入私人令牌"></el-input>
          </el-form-item>
        </el-form>
        <div class="tip">注:本站不会保存您的任何数据信息。</div>
      </div>
    </div>
    <div class="button-box">
      <el-button v-if="active===0" @click="active++">跳过</el-button>
      <el-button v-if="active!==0" @click="active--">上一步</el-button>
      <el-button v-if="active===1" type="success" :loading="loading" @click="submitForm('form')">下一步</el-button>
      <el-button v-else type="success" @click="active++;">下一步</el-button>
    </div>
  </div>
</template>
<script>
import * as gitee from '@/api/gitee'
export default {
  data() {
    return {
      active: 0,
      form:{
        owner:'',
        repo:'',
        token:''
      },
      loading:false,
      rules: {
          owner: [
            { required: true, message: '请输入您的Gitee用户名', trigger: 'blur' }
          ],
          repo: [
            { required: true, message: '请输入仓库名', trigger: 'blur' }
          ],
          token: [
            { required: true, message: '请输入您的私人令牌', trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.loading = true
          gitee.trees(this.form.owner,this.form.repo,{access_token:this.form.token}).then(res => {
            this.loading = false
            if (res.status === 200) {
               this.$message({
                message: '配置成功',
                type: 'success'
              })
               gitee.user(this.form.owner).then(doc => {
                if (doc.status === 200) {
                    this.form.avatar= doc.data.avatar_url
                    this.$store.dispatch('Login',this.form)
                    this.$router.push('/private')
                }
              })
            } else {
              this.$message.error('请重新确认填入信息的正确性!!!');
            }
          })
          // this.active++
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.private {
  width: 50%;
  margin: 1rem auto;
  .button-box {
    text-align: center;
    margin-top: 2rem;
  }
  .el-button + .el-button {
    margin-left: 15rem;
  }
  .content-box {
    margin: 2rem auto;
    text-align: center;
    h3,
    h4 {
      text-align: left;
    }
    .content-box_img {
      margin: 1rem auto;
      width: 22rem;
      padding: 0.5rem;
    }
    .tip {
      padding: 2rem;
      border-left: 10px solid red;
      text-align: left;
    }
  }
}
</style>
<style>
.illustration{
  width: 28rem;
  right: 0;
  bottom: 0;
}
</style>
